<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- <img src="./icon-assets/1.bmp" alt=""> -->
    
    <script>
        // 要求：
            // 定义字符串变量
            // 循环的方式，把icon-assets目录下的所有图标渲染在页面

        // 编码：
            // 定义字符串变量
            var str = "";
            // 以下是重复执行的代码
            // str += '<img src="./icon-assets/1.bmp" alt="">'
            // str += '<img src="./icon-assets/2.bmp" alt="">'
            // str += '<img src="./icon-assets/3.bmp" alt="">'
            // str += '<img src="./icon-assets/4.bmp" alt="">'
            
            // 循环100次
            for(var num = 1 ; num <= 100; num ++ ){
                // str += '<img src="./icon-assets/1.bmp" alt="">'// 写（做）死的方式
                // str +='<img src="./icon-assets/'+num+'.bmp" alt="">'// 正确方式

                str +="<img src='./icon-assets/"+num+".bmp' alt=''>";// 正确方式
            }

            // 控制台检查变量是否有值
            // console.log(str);
            // 渲染字符串
            document.write(str);

            // 总结：
                // 重复的事情（代码）可以用循环实现
                // 字符串拼接有技巧：
                    // 字符串外使用单引号包裹时，字符串内需要插入变量时，就使用单引号 '+变量+'
                    // 字符串外使用双引号包裹时，字符串内需要插入变量时，就使用双引号 "+变量+"



    </script>
</body>
</html>